<!--
 * @Description: 支付入网页面-盛付通（多端使用）
 * @Author: Kerwin
 * @Date: 2024-02-26 13:52:41
 * @LastEditTime: 2025-07-18 14:58:26
 * @LastEditors:  Please set LastEditors
-->
<!-- eslint-disable no-shadow -->
<!-- eslint-disable no-console -->
<!-- eslint-disable no-use-before-define -->
<script setup lang="ts">
import { reactive, ref, onMounted, watch, computed } from 'vue'
import { onLoad, onShow, onReady, onPageScroll } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { baseApi, powerBankApi, userApi, productApi } from '@/api'
import { checkLoginState, dateFormat, getImgFullPath } from '@/utils/index'
import { useUserStore } from '@/store'
import customUpload from '../../components/custom-upload/custom-upload.vue'
import c_channelSelector from './c_channelSelector.vue'
import c_previewSubsection from './c_previewSubsection.vue'

import { browserVersion, getCookie } from '@/utils/common'
import { rules } from './formRule/sftFormRule'

const userStore = useUserStore()
const { userInfo, hasLogin } = storeToRefs(userStore)
const loading = ref(false)
const check = ref(false)
const tabs = [
  {
    name: '企业商户',
    type: 1
  },
  {
    name: '个体商户',
    type: 0
  },
  {
    name: '小微商户',
    type: 2
  }
]
const current = ref(0)
const change = (index: number) => {
  formData.sft_merchantType = tabs[index].type
  handler('sft_merchantType', formData.sft_merchantType)
}

const agree = ref(false)
const form = ref()
let formData = reactive({
  paymentChannel: '', // 支付入网通道
  accessStatus: '', //
  sft_email: '', // 邮箱
  sft_accessStatus: '', // 盛付通入网状态
  sft_merchantType: '1', // 门店入驻类型
  sft_industryCategory: '', // 行业类别
  sft_registerPhone: '', // 注册手机号
  sft_licenseNo: '', // 营业执照号
  sft_avatar: '', // 商户头像
  sft_shopFrontDeskImg: '', // 门头照片
  sft_shopInsideImg: '', // 门店内照片
  sft_licenseExpiryDate: '', // 营业执照有效期
  sft_corporationName: '', // 法人
  sft_corporationIdcardNo: '', // 法人身份证号
  sft_corporationIdcardAddress: '', // 法人证件地址
  sft_corporationIdcardFrontImage: '', // 身份证人像面
  sft_corporationIdcardBackImage: '', // 身份证国徽面
  sft_corporationIdcardWithHandImage: '', // 手持身份证人像面
  sft_corporationIdcardExpiryDate: '', // 证件有效期
  sft_accountType: '对公账户', // 账户类型
  sft_accountTypeValue: '0', // 账户类型
  sft_accountType2: '法人个人储蓄账户', // 账户类型(个体-其他个人账户)
  sft_accountType2Value: '1', // 账户类型值(个体-其他个人账户)
  sft_accountName: '', // 账户名称
  sft_bankcardFrontImage: '', // 账户名称
  sft_bankcardNo: '', // 银行卡卡号
  sft_bankcardNoRepeat: '', // 银行卡卡号重复
  sft_bankBranch: '', // 银行卡开户行
  sft_accountOpeningCertificate: '', // 银行卡开户行证明
  sft_corporatePersonalAccountName: '', // 法人个人银行账户名称
  sft_corporatePersonalAccountNo: '', // 法人个人银行账户
  sft_corporatePersonalAccountFrontImage: '', // 法人个人银行账户银行卡正面
  sft_corporatePersonalAccountBackImage: '', // 法人个人银行账户银行卡背面
  sft_corporatePersonalAccountBankBranch: '', // 法人个人银行账户开户行
  sft_otherPersonName: '', // 持卡人
  sft_otherPersonIdcardNo: '', // 持卡人身份证号
  sft_otherPersonIdcardFrontImage: '', // 其他个人银行账户银行卡人像面
  sft_otherPersonIdcardBackImage: '', // 其他个人银行账户银行卡人像面
  sft_otherPersonIdcardExpiryDate: '', // 持卡人身份证有效期
  sft_otherPersonIdcardBankBranch: '', // 其他个人银行账户开户行
  sft_otherPersonAccountName: '', // 其他个人银行账户名称
  sft_otherPersonAccountImage: '', // 其他个人银行卡照片
  sft_otherPersonAccountBackImage: '', // 其他个人银行卡背面照片
  sft_otherPersonAccountNo: '', // 其他个人银行账户
  sft_signType: '法人人脸识别签约', // 签约类型
  sft_wxmerchantNumber: '',
  sft_alimerchantNumber: '',
  sftMerchantNumber: '',
  shengpaySubPublicKey: '', // 盛付通商户子公钥
  shengpaySubPrivateKey: '' // 盛付通商户子私钥
})

const calendars = ref([
  {
    name: 'sft_licenseExpiryDate',
    show: false,
    minDate: `${new Date().getFullYear() - 100}-01-01`,
    maxDate: `${new Date().getFullYear() + 100}-01-01`,
    callback: (e: any) => {
      const { startDate, endDate } = e
      formData.sft_licenseExpiryDate = startDate + '至' + endDate
      handler('sft_licenseExpiryDate', formData.sft_licenseExpiryDate)
    }
  },
  {
    name: 'sft_corporationIdcardExpiryDate',
    show: false,
    minDate: `${new Date().getFullYear() - 100}-01-01`,
    maxDate: `${new Date().getFullYear() + 100}-01-01`,
    callback: (e: any) => {
      const { startDate, endDate } = e
      formData.sft_corporationIdcardExpiryDate = startDate + '至' + endDate
      handler(
        'sft_corporationIdcardExpiryDate',
        formData.sft_corporationIdcardExpiryDate
      )
    }
  },
  {
    name: 'sft_otherPersonIdcardExpiryDate',
    show: false,
    minDate: `${new Date().getFullYear() - 100}-01-01`,
    maxDate: `${new Date().getFullYear() + 100}-01-01`,
    callback: (e: any) => {
      const { startDate, endDate } = e
      formData.sft_otherPersonIdcardExpiryDate = startDate + '至' + endDate
      handler(
        'sft_otherPersonIdcardExpiryDate',
        formData.sft_otherPersonIdcardExpiryDate
      )
    }
  }
])
function handleBigRange(calendar: any) {
  const { name, callback } = calendar
  const data = {
    startDate: `${dateFormat(new Date(), 'yyyy-MM-dd')}`,
    endDate: `${new Date().getFullYear() + 60}-01-01`
  }
  callback(data)
}
const selectors = ref([
  {
    name: 'sft_accountType',
    show: false,
    options: [
      {
        label: '对公账户',
        value: 0
      },
      {
        label: '法人个人储蓄账户',
        value: 1
      },
      {
        label: '其他个人储蓄账户',
        value: 2
      }
    ],
    value: '',
    callback: (e: any) => {
      const data = e[0]
      formData.sft_accountType = data.label
      formData.sft_accountTypeValue = data.value
      handler('sft_accountType', formData.sft_accountType)
      handler('sft_accountTypeValue', formData.sft_accountTypeValue)
    }
  },
  {
    name: 'sft_accountType2',
    show: false,
    options: [
      {
        label: '对公账户',
        value: '0'
      },
      {
        label: '法人个人储蓄账户',
        value: '1'
      }
    ],
    value: '',
    callback: (e: any) => {
      const data = e[0]
      formData.sft_accountType2 = data.label
      formData.sft_accountType2Value = data.value
      handler('sft_accountType2', formData.sft_accountType2)
      handler('sft_accountType2Value', formData.sft_accountType2Value)
    }
  }
])
const radioGroups = reactive([
  {
    name: 'stf_signType',
    options: [
      {
        name: '法人人脸签约',
        disabled: false
      }
    ]
  }
])
watch(
  current,
  (newVal) => {
    if (newVal == 2) {
      radioGroups[0].options = [
        {
          name: '银行卡本人人脸认别签约',
          disabled: false
        }
      ]
      formData.sft_signType = '银行卡本人人脸认别签约'
    } else {
      radioGroups[0].options = [
        {
          name: '法人人脸识别签约',
          disabled: false
        }
      ]
      formData.sft_signType = '法人人脸识别签约'
    }
  },
  {
    immediate: true
  }
)

const uploadUrl = ref('https://api.wanwkm.com/base/api/v1/ali/sendFile')
const header = reactive({
  Authorization: `Bearer ${
    uni.getStorageSync('accessToken') || getCookie('HYToken') || ''
  }`
})
const tempFormData = reactive({})
const isPreview = ref(false)
const CHECKSTATUS = {
  DEFAULT: 0,
  CHECK_WILL: 1,
  CHECK_ING: 10,
  CHECK_SUCCESS: 20,
  CHECK_FAIL: 21,
  CHECK_DONE: 22
}
const CHECKTIPS = {
  [CHECKSTATUS.DEFAULT]: '',
  [CHECKSTATUS.CHECK_WILL]: '待审核',
  [CHECKSTATUS.CHECK_ING]: '资料审核中，请您耐心等待！',
  [CHECKSTATUS.CHECK_SUCCESS]:
    '支付入网已成功，请在收到短信后进行人脸识别和微信/支付宝认证！',
  [CHECKSTATUS.CHECK_FAIL]: '审核拒绝，请提交资料！',
  [CHECKSTATUS.CHECK_DONE]: '支付入网已完成，支付可正常使用'
}
const tips = ref('')
/**
 * @description: 返回相应状态的tips
 * @param {*} status 审核状态码
 * @return {*} 审核状态tips
 * @author: Kerwin
 */
function getTips(status: any) {
  if (!status) return ''
  return CHECKTIPS[status]
}
function uploadSuccess(data: any, index: any, lists: any, name: string) {
  handler(name, data.data)
}
/**
 * @description: 执行新增或更新
 * @param {*} name 字段名称
 * @param {*} data 字段值数据
 * @return {*}
 * @author: Kerwin
 */
function handler(name: string, data: any, allowPreviewUpd?: boolean = false) {
  if (isPreview.value && !allowPreviewUpd) {
    uni.showToast({ icon: 'none', title: '预览模式，不可修改数据！' })
    return
  }
  const id = getIdByName(name)
  const executor = id ? externalUpdate : externalAdd
  let fieldValue = data
  if (formData[name] instanceof Array) {
    if (!tempFormData[name]) {
      tempFormData[name] = []
    }
    tempFormData[name].push(data)
    fieldValue = JSON.stringify(tempFormData[name])
  } else {
    tempFormData[name] = data
  }
  return executor({
    id,
    fieldName: name,
    fieldValue: fieldValue
  })
}
function inputBlur(e: any, name: string) {
  if (name === 'sft_bankcardNoRepeat') {
    if (e != formData.sft_bankcardNo) {
      uni.showToast({
        title: '两次输入的银行卡卡号不一致',
        icon: 'none'
      })
      return
    }
  }
  handler(name, e)
}
function inputBlurAllowPreviewUpd(e: any, name: string) {
  handler(name, e, Boolean(1))
}
function removeObject(index: any, lists: any, name: string) {
  const type = typeof formData[name]
  if (type === 'string') {
    externalUpdate({
      id: getIdByName(name),
      fieldName: name,
      fieldValue: ''
    })
    formData[name] = ''
    tempFormData[name] = ''
  } else {
    tempFormData[name].splice(index, 1)
    externalUpdate({
      id: getIdByName(name),
      fieldName: name,
      fieldValue: JSON.stringify(tempFormData[name])
    })
  }
}
const shopId = ref('')
async function externalAdd(obj: any) {
  uni.showLoading()
  const { data } = await productApi
    .externalAdd({
      ...obj,
      shopId: shopId.value
    })
    .finally(() => {
      uni.hideLoading()
    })
  // uni.showToast({
  //   title: '提交成功'
  // })
  getShopExternals(false)
}
async function externalUpdate(obj: any) {
  const { data } = await productApi.externalUpdate({
    ...obj,
    shopId: shopId.value
  })
  // uni.showToast({
  //   title: '更新成功'
  // })
}
const channelSelectorRef = ref()
const shopExternals = ref([])
async function getShopExternals(flag = true) {
  if (!shopId.value) return
  uni.showLoading()
  const { data } = await productApi
    .getShopInfo({
      id: shopId.value,
      detail: true
    })
    .finally(() => {
      uni.hideLoading()
    })
  shopExternals.value = data.shopExternals
  if (!flag) return
  getValueByName()
  setTimeout(() => {
    if (formData.paymentChannel) {
      // channelSelectorRef.value.open(false)
    }
  }, 100)
  const sft_merchantType = formData.sft_merchantType
  const shopType = formData.shopType // 兼容老字段
  if (shopType != undefined) {
    current.value = tabs.findIndex((item) => {
      return item.type === Number(shopType)
    })
  }
  if (sft_merchantType != undefined) {
    current.value = tabs.findIndex((item) => {
      return item.type === Number(sft_merchantType)
    })
  }

  tips.value = getTips(formData.accessStatus)
}
function getIdByName(name: string) {
  if (!name) return
  if (!shopExternals.value) return
  const external = shopExternals.value.find((item) => item.fieldName === name)
  if (external) {
    return external.id
  } else {
    return null
  }
}
function getValueByName() {
  for (let key in formData) {
    const external = shopExternals.value.find((item) => item.fieldName === key)
    if (external) {
      if (typeof formData[key] === 'string') {
        formData[key] = external.fieldValue
        tempFormData[key] = external.fieldValue
      } else {
        formData[key] = JSON.parse(external.fieldValue)
        tempFormData[key] = JSON.parse(external.fieldValue)
      }
    }
  }
}
const downloadByUrl = (url: string, filename: string) => {
  if (!url) throw new Error('当前没有下载链接')
  const a = document.createElement('a')
  a.style.display = 'none'
  a.href = url
  a.download = filename
  // 使用target="_blank"时，添加rel="noopener noreferrer" 堵住钓鱼安全漏洞 防止新页面window指向之前的页面
  a.rel = 'noopener noreferrer'
  document.body.append(a)
  a.click()
  setTimeout(() => {
    a.remove()
  }, 1000)
}

function submit() {
  // if (!agree.value) {
  //   uni.showToast({
  //     icon: 'none',
  //     title: '请勾选同意资料申报由万店补贴工作人员办理'
  //   })
  //   return
  // }
  form.value.validate(async (valid: any) => {
    if (valid) {
      const data = { ...formData, ...tempFormData }
      if (!data.sft_avatar) {
        uni.showToast({
          icon: 'none',
          title: '请上传商户头像'
        })
        valid = false
      }
      if (!data.sft_shopFrontDeskImg) {
        uni.showToast({
          icon: 'none',
          title: '请上传门头照'
        })
        valid = false
      }
      if (!data.sft_shopInsideImg) {
        uni.showToast({
          icon: 'none',
          title: '请上传店内照'
        })
        valid = false
      }
      // 企业商户
      if (data.sft_merchantType == '1') {
        if (!data.sft_corporationIdcardFrontImage) {
          uni.showToast({
            icon: 'none',
            title: '请上传法人身份证正面照'
          })
          valid = false
        }
        if (!data.sft_corporationIdcardBackImage) {
          uni.showToast({
            icon: 'none',
            title: '请上传法人身份证反面照'
          })
          valid = false
        }
        if (data.sft_accountTypeValue == 0) {
          if (!data.sft_accountOpeningCertificate) {
            uni.showToast({
              icon: 'none',
              title: '请上传开户证明'
            })
            valid = false
          }
        }
        if (data.sft_accountTypeValue == 1) {
          if (!data.sft_corporatePersonalAccountFrontImage) {
            uni.showToast({
              icon: 'none',
              title: '请上传银行卡正面照'
            })
            valid = false
          }
        }
        if (data.sft_accountTypeValue == 2) {
          if (!data.sft_otherPersonIdcardFrontImage) {
            uni.showToast({
              icon: 'none',
              title: '请上传持卡人身份证正面照'
            })
            valid = false
          }
          if (!data.sft_otherPersonIdcardBackImage) {
            uni.showToast({
              icon: 'none',
              title: '请上传持卡人身份证反面照'
            })
            valid = false
          }
          if (!data.sft_otherPersonAccountImage) {
            uni.showToast({
              icon: 'none',
              title: '请上传银行卡正面照'
            })
            valid = false
          }
        }
      }
      // 个人商户
      if (data.sft_merchantType == 0) {
        if (!data.sft_corporationIdcardFrontImage) {
          uni.showToast({
            icon: 'none',
            title: '请上传法人身份证正面照'
          })
          valid = false
        }
        if (!data.sft_corporationIdcardBackImage) {
          uni.showToast({
            icon: 'none',
            title: '请上传法人身份证反面照'
          })
          valid = false
        }
        if (data.sft_accountTypeValue == 0) {
          if (!data.sft_accountOpeningCertificate) {
            uni.showToast({
              icon: 'none',
              title: '请上传开户证明'
            })
            valid = false
          }
        }
        if (data.sft_accountTypeValue == 1) {
          if (!data.sft_corporatePersonalAccountFrontImage) {
            uni.showToast({
              icon: 'none',
              title: '请上传银行卡正面照'
            })
            valid = false
          }
        }
        if (data.sft_accountTypeValue == 2) {
          if (!data.sft_otherPersonIdcardFrontImage) {
            uni.showToast({
              icon: 'none',
              title: '请上传持卡人身份证正面照'
            })
            valid = false
          }
          if (!data.sft_otherPersonIdcardBackImage) {
            uni.showToast({
              icon: 'none',
              title: '请上传持卡人身份证反面照'
            })
            valid = false
          }
          if (!data.sft_otherPersonAccountImage) {
            uni.showToast({
              icon: 'none',
              title: '请上传银行卡正面照'
            })
            valid = false
          }
        }
        if (data.sft_accountType2Value == '0') {
          if (!data.sft_accountOpeningCertificate) {
            uni.showToast({
              icon: 'none',
              title: '请上传开户证明'
            })
            valid = false
          }
        }
        if (data.sft_accountType2Value == '1') {
          if (!data.sft_corporatePersonalAccountFrontImage) {
            uni.showToast({
              icon: 'none',
              title: '请上传银行卡正面照'
            })
            valid = false
          }
        }
      }
      // 小微商户
      if (data.sft_merchantType == 2) {
        if (!data.sft_corporationIdcardFrontImage) {
          uni.showToast({
            icon: 'none',
            title: '请上传身份证正面照'
          })
          valid = false
        }
        if (!data.sft_corporationIdcardBackImage) {
          uni.showToast({
            icon: 'none',
            title: '请上传身份证反面照'
          })
          valid = false
        }
        if (!data.sft_corporationIdcardWithHandImage) {
          uni.showToast({
            icon: 'none',
            title: '请上传手持证件照'
          })
          valid = false
        }
        if (!data.sft_corporatePersonalAccountFrontImage) {
          uni.showToast({
            icon: 'none',
            title: '请上传银行卡正面照'
          })
          valid = false
        }
      }
      if (!valid) return
      try {
        uni.showLoading()
        await handler('accessStatus', CHECKSTATUS.CHECK_WILL)
        uni.hideLoading()
      } catch (error) {
        uni.hideLoading()
        console.log(error)
      }
      await showSuccessTips()
    } else {
    }
  })
}
function showSuccessTips() {
  let time = 6
  uni.showToast({
    title: `提交成功，请等待接收短信做人脸识别验证。`,
    icon: 'none',
    mask: true,
    duration: time * 1000
  })
  let timer = setInterval(() => {
    time--
    if (time) {
      uni.showToast({
        title: `提交成功，请等待接收短信做人脸识别验证。 \n ${time}s后返回首页`,
        icon: 'none',
        mask: true,
        duration: time * 1000
      })
    } else {
      clearInterval(timer)
      timer = null
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  }, 1000)
}
function channelConfirm(data: any) {}
const scrollTop = ref(0)
onPageScroll((e) => {
  scrollTop.value = e.scrollTop
})
const isApp = ref(false)
onLoad(async (option) => {
  if (option?.shopId) {
    shopId.value = option?.shopId
  } else {
    uni.showModal({
      title: '提示',
      content: '请先提交门店入驻',
      showCancel: false,
      success: ({ confirm, cancel }) => {
        if (confirm) {
          uni.navigateBack()
        }
      }
    })
    return false
  }
  isApp.value = option?.from === 'app' || browserVersion().isHeiyin
  if (isApp.value) {
    // #ifdef H5
    console.log('前端注册回调时机==>', new Date())
    window.JSBridge.registerEvent('HYUserEvent', () => {
      header.Authorization = `Bearer ${getCookie('HYToken') || ''}`
      getShopExternals()
    })
    if (option?.isPreview) {
      isPreview.value = true
    }
    // #endif
  } else {
    getShopExternals()
  }
})
onReady(() => {
  form.value.setRules(rules)
})
</script>
<template>
  <view class="container">
    <!-- #ifdef H5 -->
    <hy-nav-bar :title="'支付入网'" v-if="!isApp"></hy-nav-bar>
    <!-- #endif -->
    <c_previewSubsection
      v-if="isPreview"
      :isPreview="isPreview"
      paymentChannel="sft"
      :shopId="shopId"
    />

    <u-alert-tips
      type="warning"
      title=""
      v-if="tips"
      :show-icon="true"
      :description="tips"
      style="margin: 20rpx 30rpx"
    ></u-alert-tips>
    <u-tabs
      :list="tabs"
      :is-scroll="false"
      v-model="current"
      @change="change"
    ></u-tabs>
    <u-form :model="formData" ref="form">
      <view class="section">
        <u-form-item
          required
          label="注册手机号"
          label-width="auto"
          prop="sft_registerPhone"
          :border-bottom="false"
          ><u-input
            v-model="formData.sft_registerPhone"
            @blur="inputBlur($event, 'sft_registerPhone')"
            input-align="right"
            placeholder="请填写您的手机号"
            :show-confirmbar="false"
        /></u-form-item>
      </view>
      <view class="section">
        <u-form-item
          required
          label="邮箱"
          label-width="auto"
          prop="sft_email"
          :border-bottom="false"
          ><u-input
            v-model="formData.sft_email"
            @blur="inputBlur($event, 'sft_email')"
            input-align="right"
            placeholder="请填写您的邮箱"
            :show-confirmbar="false"
        /></u-form-item>
      </view>
      <view class="section" v-if="formData.sft_merchantType != 2">
        <u-form-item
          required
          label="营业执照信用代码"
          label-width="auto"
          prop="sft_licenseNo"
          :border-bottom="true"
          ><u-input
            v-model="formData.sft_licenseNo"
            @blur="inputBlur($event, 'sft_licenseNo')"
            input-align="right"
            placeholder="营业执照信用代码"
            :show-confirmbar="false"
        /></u-form-item>
        <u-form-item
          required
          label="营业执照有效期"
          label-width="auto"
          prop="sft_licenseExpiryDate"
          :border-bottom="false"
        >
          <u-input
            v-model="formData.sft_licenseExpiryDate"
            type="select"
            @click="calendars[0].show = true"
            input-align="right"
          />
          <u-calendar
            v-model="calendars[0].show"
            mode="range"
            :min-date="calendars[0].minDate"
            :max-date="calendars[0].maxDate"
            @change="calendars[0].callback"
          ></u-calendar>
          <text class="cq" @click="handleBigRange(calendars[0])">长期</text>
        </u-form-item>
      </view>
      <!-- 店内照片 -->
      <view class="section">
        <view class="title"
          >店铺门头
          <text class="tips"> *请确保上传的图片清晰，文字可辨 </text>
        </view>
        <view class="uploadBox" flex>
          <u-form-item
            label=""
            label-width="auto"
            prop="sft_avatar"
            :border-bottom="false"
          >
            <custom-upload
              ref="upload1"
              :action="uploadUrl"
              :header="header"
              name="object"
              max-count="1"
              :custom-btn="true"
              @on-remove="removeObject"
              @on-success="uploadSuccess"
              index="sft_avatar"
              :file-list="
                formData.sft_avatar
                  ? [{ url: getImgFullPath(formData.sft_avatar) }]
                  : []
              "
            >
              <template v-slot:addBtn>
                <view
                  class="slot-btn"
                  hover-class="slot-btn__hover"
                  hover-stay-time="150"
                >
                  <u-icon name="plus" size="80" color="#fff"></u-icon>
                  <view class="des">店铺门头</view>
                </view>
              </template>
            </custom-upload>
          </u-form-item>
          <u-form-item
            label=""
            label-width="auto"
            prop="sft_shopFrontDeskImg"
            :border-bottom="false"
          >
            <custom-upload
              ref="upload1"
              :action="uploadUrl"
              :header="header"
              name="object"
              max-count="1"
              :custom-btn="true"
              @on-remove="removeObject"
              @on-success="uploadSuccess"
              index="sft_shopFrontDeskImg"
              :file-list="
                formData.sft_shopFrontDeskImg
                  ? [{ url: getImgFullPath(formData.sft_shopFrontDeskImg) }]
                  : []
              "
            >
              <template v-slot:addBtn>
                <view
                  class="slot-btn"
                  hover-class="slot-btn__hover"
                  hover-stay-time="150"
                >
                  <u-icon name="plus" size="80" color="#fff"></u-icon>
                  <view class="des">前台照片</view>
                </view>
              </template>
            </custom-upload>
          </u-form-item>
          <u-form-item
            label=""
            label-width="auto"
            prop="sft_shopInsideImg"
            :border-bottom="false"
          >
            <custom-upload
              ref="upload1"
              :action="uploadUrl"
              :header="header"
              name="object"
              max-count="1"
              :custom-btn="true"
              @on-remove="removeObject"
              @on-success="uploadSuccess"
              index="sft_shopInsideImg"
              :file-list="
                formData.sft_shopInsideImg
                  ? [{ url: getImgFullPath(formData.sft_shopInsideImg) }]
                  : []
              "
            >
              <template v-slot:addBtn>
                <view
                  class="slot-btn"
                  hover-class="slot-btn__hover"
                  hover-stay-time="150"
                >
                  <u-icon name="plus" size="80" color="#fff"></u-icon>
                  <view class="des">店铺内部照片</view>
                </view>
              </template>
            </custom-upload>
          </u-form-item>
        </view>
      </view>
      <!-- 企业法人/个体商户法人/小微商户老板身份信息 -->
      <view class="section">
        <u-form-item
          required
          :label="formData.sft_merchantType == 2 ? '银行卡本人' : '法人'"
          label-width="auto"
          prop="sft_corporationName"
          :border-bottom="true"
        >
          <u-input
            v-model="formData.sft_corporationName"
            @blur="inputBlur($event, 'sft_corporationName')"
            input-align="right"
            placeholder="请输入"
            :show-confirmbar="false"
          />
        </u-form-item>
        <u-form-item
          required
          label="身份证号"
          label-width="auto"
          prop="sft_corporationIdcardNo"
          :border-bottom="true"
        >
          <u-input
            v-model="formData.sft_corporationIdcardNo"
            @blur="inputBlur($event, 'sft_corporationIdcardNo')"
            input-align="right"
            placeholder="请输入"
            :show-confirmbar="false"
          />
        </u-form-item>
        <u-form-item
          required
          label="证件地址"
          label-width="auto"
          prop="sft_corporationIdcardAddress"
          :border-bottom="true"
        >
          <u-input
            v-model="formData.sft_corporationIdcardAddress"
            @blur="inputBlur($event, 'sft_corporationIdcardAddress')"
            input-align="right"
            placeholder="请输入"
            :show-confirmbar="false"
          />
        </u-form-item>
        <view>
          <u-form-item
            required
            label="身份证正反面照片"
            label-width="auto"
            :border-bottom="false"
          ></u-form-item>
          <view class="tips">支持.jpg .jpeg .png格式照片，大小不超过10M</view>
          <view class="uploadBox" flex>
            <u-form-item
              label=""
              label-width="auto"
              prop="sft_corporationIdcardFrontImage"
              :border-bottom="false"
            >
              <custom-upload
                ref="upload1"
                :showUploadList="true"
                name="object"
                :action="uploadUrl"
                :header="header"
                max-count="1"
                :multiple="false"
                :custom-btn="true"
                @on-success="uploadSuccess"
                @on-remove="removeObject"
                :deletable="!isPreview"
                index="sft_corporationIdcardFrontImage"
                :file-list="
                  formData.sft_corporationIdcardFrontImage
                    ? [
                        {
                          url: getImgFullPath(
                            formData.sft_corporationIdcardFrontImage
                          )
                        }
                      ]
                    : []
                "
              >
                <template v-slot:addBtn>
                  <view
                    class="slot-btn"
                    hover-class="slot-btn__hover"
                    hover-stay-time="150"
                  >
                    <u-icon name="plus" size="80" color="#fff"></u-icon>
                    <view class="des">正面照</view>
                  </view>
                </template>
              </custom-upload>
            </u-form-item>
            <u-form-item
              label=""
              label-width="auto"
              prop="sft_corporationIdcardBackImage"
              :border-bottom="false"
            >
              <custom-upload
                ref="upload2"
                name="object"
                :action="uploadUrl"
                max-count="1"
                :custom-btn="true"
                :deletable="!isPreview"
                :header="header"
                @on-success="uploadSuccess"
                @on-remove="removeObject"
                index="sft_corporationIdcardBackImage"
                :file-list="
                  formData.sft_corporationIdcardBackImage
                    ? [
                        {
                          url: getImgFullPath(
                            formData.sft_corporationIdcardBackImage
                          )
                        }
                      ]
                    : []
                "
              >
                <template v-slot:addBtn>
                  <view
                    class="slot-btn"
                    hover-class="slot-btn__hover"
                    hover-stay-time="150"
                  >
                    <u-icon name="plus" size="80" color="#fff"></u-icon>
                    <view class="des">反面照</view>
                  </view>
                </template>
              </custom-upload>
            </u-form-item>
          </view>
        </view>
        <u-form-item
          v-if="formData.sft_merchantType == 2"
          required
          label="手持证件照"
          label-width="auto"
          prop="sft_corporationIdcardWithHandImage"
          :border-bottom="false"
          label-position="top"
        >
          <view class="uploadBox" flex>
            <u-form-item
              label=""
              label-width="auto"
              prop="sft_corporationIdcardWithHandImage"
              :border-bottom="false"
            >
              <custom-upload
                ref="upload1"
                name="object"
                :action="uploadUrl"
                :header="header"
                max-count="1"
                :multiple="false"
                :custom-btn="true"
                @on-success="uploadSuccess"
                @on-remove="removeObject"
                :deletable="!isPreview"
                index="sft_corporationIdcardWithHandImage"
                :file-list="
                  formData.sft_corporationIdcardWithHandImage
                    ? [
                        {
                          url: getImgFullPath(
                            formData.sft_corporationIdcardWithHandImage
                          )
                        }
                      ]
                    : []
                "
              >
                <template v-slot:addBtn>
                  <view
                    class="slot-btn"
                    hover-class="slot-btn__hover"
                    hover-stay-time="150"
                  >
                    <u-icon name="plus" size="80" color="#fff"></u-icon>
                    <view class="des">手持证件照</view>
                  </view>
                </template>
              </custom-upload>
            </u-form-item>
            <view class="tips">
              支持.jpg .jpeg .png格式照片，大小不超过10M
            </view>
          </view>
        </u-form-item>
        <!-- <u-form-item required :label="formData.sft_merchantType == 2 ? '银行卡本人身份证有效期' : '法人身份证有效期'" label-width="auto"
          prop="sft_corporationIdcardExpiryDate" :border-bottom="false">
          <u-input v-model="formData.sft_corporationIdcardExpiryDate" type="select" @click="calendars[1].show = true"
            input-align="right" />
          <u-calendar v-model="calendars[1].show" mode="range" :min-date="calendars[1].minDate"
            :max-date="calendars[1].maxDate" @change="calendars[1].callback"></u-calendar>
          <text class="cq" @click="handleBigRange(calendars[1])">长期</text>
        </u-form-item> -->
      </view>
      <!--其他个人储蓄账户持卡人身份信息： 小微商户不显示，其他商户选择其他个人储蓄账户时显示  -->
      <view
        class="section"
        v-if="
          formData.sft_accountTypeValue == '2' && formData.sft_merchantType != 2
        "
      >
        <u-form-item
          required
          label="账户类型"
          label-width="auto"
          prop="sft_accountType"
          :border-bottom="true"
        >
          <u-input
            v-model="formData.sft_accountType"
            type="select"
            input-align="right"
            @click="selectors[0].show = true"
        /></u-form-item>
        <u-select
          v-model="selectors[0].show"
          :list="selectors[0].options"
          @confirm="selectors[0].callback"
        ></u-select>

        <u-form-item
          required
          label="持卡人"
          label-width="auto"
          prop="sft_otherPersonName"
          :border-bottom="true"
        >
          <u-input
            v-model="formData.sft_otherPersonName"
            @blur="inputBlur($event, 'sft_otherPersonName')"
            input-align="right"
            placeholder="请输入"
            :show-confirmbar="false"
          />
        </u-form-item>
        <u-form-item
          required
          label="持卡人身份证号"
          label-width="auto"
          prop="sft_otherPersonIdcardNo"
          :border-bottom="true"
        >
          <u-input
            v-model="formData.sft_otherPersonIdcardNo"
            @blur="inputBlur($event, 'sft_otherPersonIdcardNo')"
            input-align="right"
            placeholder="请输入"
            :show-confirmbar="false"
          />
        </u-form-item>
        <u-form-item
          required
          label="持卡人身份证正反面照片"
          label-width="auto"
          prop=""
          :border-bottom="false"
          label-position="top"
        >
        </u-form-item>
        <view class="tips"> 支持.jpg .jpeg .png格式照片，大小不超过10M </view>
        <view class="uploadBox" flex>
          <u-form-item
            label=""
            label-width="auto"
            prop="sft_otherPersonIdcardFrontImage"
            :border-bottom="false"
          >
            <custom-upload
              ref="upload1"
              name="object"
              :action="uploadUrl"
              :header="header"
              max-count="1"
              :multiple="false"
              :custom-btn="true"
              @on-success="uploadSuccess"
              @on-remove="removeObject"
              :deletable="!isPreview"
              index="sft_otherPersonIdcardFrontImage"
              :file-list="
                formData.sft_otherPersonIdcardFrontImage
                  ? [
                      {
                        url: getImgFullPath(
                          formData.sft_otherPersonIdcardFrontImage
                        )
                      }
                    ]
                  : []
              "
            >
              <template v-slot:addBtn>
                <view
                  class="slot-btn"
                  hover-class="slot-btn__hover"
                  hover-stay-time="150"
                >
                  <u-icon name="plus" size="80" color="#fff"></u-icon>
                  <view class="des">正面照</view>
                </view>
              </template>
            </custom-upload>
          </u-form-item>
          <u-form-item
            label=""
            label-width="auto"
            prop="sft_otherPersonIdcardBackImage"
            :border-bottom="false"
          >
            <custom-upload
              ref="upload1"
              name="object"
              :action="uploadUrl"
              :header="header"
              max-count="1"
              :multiple="false"
              :custom-btn="true"
              @on-success="uploadSuccess"
              @on-remove="removeObject"
              :deletable="!isPreview"
              index="sft_otherPersonIdcardBackImage"
              :file-list="
                formData.sft_otherPersonIdcardBackImage
                  ? [
                      {
                        url: getImgFullPath(
                          formData.sft_otherPersonIdcardBackImage
                        )
                      }
                    ]
                  : []
              "
            >
              <template v-slot:addBtn>
                <view
                  class="slot-btn"
                  hover-class="slot-btn__hover"
                  hover-stay-time="150"
                >
                  <u-icon name="plus" size="80" color="#fff"></u-icon>
                  <view class="des">背面照</view>
                </view>
              </template>
            </custom-upload>
          </u-form-item>
        </view>
        <!-- <u-form-item required label="证件有效期" label-width="auto" prop="sft_otherPersonIdcardExpiryDate"
          :border-bottom="false">
          <u-input v-model="formData.sft_otherPersonIdcardExpiryDate" type="select" @click="calendars[2].show = true"
            input-align="right" />
          <u-calendar v-model="calendars[2].show" mode="range" :min-date="calendars[2].minDate"
            :max-date="calendars[2].maxDate" @change="calendars[2].callback"></u-calendar>
          <text class="cq" @click="handleBigRange(calendars[2])">长期</text>
        </u-form-item> -->
      </view>
      <!--法人个人储蓄账户信息： 小微商户直接显示，其他商户选择法人个人储蓄账户时显示  -->
      <view
        class="section"
        v-if="formData.sft_accountTypeValue == '1' || current == 2"
      >
        <!--小微不显示账户类型切换项 -->
        <u-form-item
          v-if="formData.sft_merchantType != 2"
          required
          label="账户类型"
          label-width="auto"
          prop="sft_accountType"
          :border-bottom="true"
        >
          <u-input
            v-model="formData.sft_accountType"
            type="select"
            input-align="right"
            @click="selectors[0].show = true"
        /></u-form-item>
        <u-select
          v-model="selectors[0].show"
          :list="selectors[0].options"
          @confirm="selectors[0].callback"
        ></u-select>
        <u-form-item
          v-if="false"
          required
          label="账户名称"
          label-width="auto"
          prop="sft_corporatePersonalAccountName"
          :border-bottom="false"
        >
          <u-input
            v-model="formData.sft_corporatePersonalAccountName"
            @blur="inputBlur($event, 'sft_corporatePersonalAccountName')"
            input-align="right"
            placeholder="请输入"
            :show-confirmbar="false"
          />
        </u-form-item>
        <u-form-item
          required
          label="银行卡照片(有银行卡号的那一面)"
          label-width="auto"
          prop="sft_corporatePersonalAccountFrontImage"
          :border-bottom="false"
          label-position="top"
        >
          <view class="uploadBox" flex>
            <u-form-item
              label=""
              label-width="auto"
              prop=""
              :border-bottom="false"
            >
              <custom-upload
                ref="upload1"
                name="object"
                :action="uploadUrl"
                :header="header"
                max-count="1"
                :multiple="false"
                :custom-btn="true"
                @on-success="uploadSuccess"
                @on-remove="removeObject"
                :deletable="!isPreview"
                index="sft_corporatePersonalAccountFrontImage"
                :file-list="
                  formData.sft_corporatePersonalAccountFrontImage
                    ? [
                        {
                          url: getImgFullPath(
                            formData.sft_corporatePersonalAccountFrontImage
                          )
                        }
                      ]
                    : []
                "
              >
                <template v-slot:addBtn>
                  <view
                    class="slot-btn"
                    hover-class="slot-btn__hover"
                    hover-stay-time="150"
                  >
                    <u-icon name="plus" size="80" color="#fff"></u-icon>
                    <view class="des">银行卡正面照</view>
                  </view>
                </template>
              </custom-upload>
              <custom-upload
                ref="upload1"
                name="object"
                :action="uploadUrl"
                :header="header"
                max-count="1"
                :multiple="false"
                :custom-btn="true"
                @on-success="uploadSuccess"
                @on-remove="removeObject"
                :deletable="!isPreview"
                index="sft_corporatePersonalAccountBackImage"
                :file-list="
                  formData.sft_corporatePersonalAccountBackImage
                    ? [
                        {
                          url: getImgFullPath(
                            formData.sft_corporatePersonalAccountBackImage
                          )
                        }
                      ]
                    : []
                "
              >
                <template v-slot:addBtn>
                  <view
                    class="slot-btn"
                    hover-class="slot-btn__hover"
                    hover-stay-time="150"
                  >
                    <u-icon name="plus" size="80" color="#fff"></u-icon>
                    <view class="des">银行卡背面照</view>
                  </view>
                </template>
              </custom-upload>
            </u-form-item>
            <view class="tips">
              支持.jpg .jpeg .png格式照片，大小不超过10M
            </view>
          </view>
        </u-form-item>
        <u-form-item
          required
          label="银行账号"
          label-width="auto"
          prop="sft_corporatePersonalAccountNo"
          :border-bottom="false"
        >
          <u-input
            v-model="formData.sft_corporatePersonalAccountNo"
            @blur="inputBlur($event, 'sft_corporatePersonalAccountNo')"
            input-align="right"
            placeholder="请输入"
            :show-confirmbar="false"
          />
        </u-form-item>
        <u-form-item
          required
          label="开户银行"
          label-width="auto"
          prop="sft_corporatePersonalAccountBankBranch"
          :border-bottom="false"
        >
          <u-input
            v-model="formData.sft_corporatePersonalAccountBankBranch"
            @blur="inputBlur($event, 'sft_corporatePersonalAccountBankBranch')"
            input-align="right"
            placeholder="请输入"
            :show-confirmbar="false"
          />
        </u-form-item>
      </view>
      <!--其他个人储蓄账户信息： 小微商户不显示，其他商户选择其他个人储蓄账户时显示  -->
      <view
        class="section"
        v-if="
          formData.sft_accountTypeValue == '2' && formData.sft_merchantType != 2
        "
      >
        <u-form-item
          required
          label="银行卡照片(有银行卡号的那一面)"
          label-width="auto"
          prop="sft_otherPersonAccountImage"
          :border-bottom="false"
          label-position="top"
        >
          <view class="uploadBox" flex>
            <u-form-item
              label=""
              label-width="auto"
              prop=""
              :border-bottom="false"
            >
              <custom-upload
                ref="upload1"
                name="object"
                :action="uploadUrl"
                :header="header"
                max-count="1"
                :multiple="false"
                :custom-btn="true"
                @on-success="uploadSuccess"
                @on-remove="removeObject"
                :deletable="!isPreview"
                index="sft_otherPersonAccountImage"
                :file-list="
                  formData.sft_otherPersonAccountImage
                    ? [
                        {
                          url: getImgFullPath(
                            formData.sft_otherPersonAccountImage
                          )
                        }
                      ]
                    : []
                "
              >
                <template v-slot:addBtn>
                  <view
                    class="slot-btn"
                    hover-class="slot-btn__hover"
                    hover-stay-time="150"
                  >
                    <u-icon name="plus" size="80" color="#fff"></u-icon>
                    <view class="des">银行卡正面照</view>
                  </view>
                </template>
              </custom-upload>
              <custom-upload
                ref="upload1"
                name="object"
                :action="uploadUrl"
                :header="header"
                max-count="1"
                :multiple="false"
                :custom-btn="true"
                @on-success="uploadSuccess"
                @on-remove="removeObject"
                :deletable="!isPreview"
                index="sft_otherPersonAccountBackImage"
                :file-list="
                  formData.sft_otherPersonAccountBackImage
                    ? [
                        {
                          url: getImgFullPath(
                            formData.sft_otherPersonAccountBackImage
                          )
                        }
                      ]
                    : []
                "
              >
                <template v-slot:addBtn>
                  <view
                    class="slot-btn"
                    hover-class="slot-btn__hover"
                    hover-stay-time="150"
                  >
                    <u-icon name="plus" size="80" color="#fff"></u-icon>
                    <view class="des">银行卡背面照</view>
                  </view>
                </template>
              </custom-upload>
            </u-form-item>
            <view class="tips">
              支持.jpg .jpeg .png格式照片，大小不超过10M
            </view>
          </view>
        </u-form-item>
        <u-form-item
          required
          label="银行账号"
          label-width="auto"
          prop="sft_otherPersonAccountNo"
          :border-bottom="false"
        >
          <u-input
            v-model="formData.sft_otherPersonAccountNo"
            @blur="inputBlur($event, 'sft_otherPersonAccountNo')"
            input-align="right"
            placeholder="请输入"
            :show-confirmbar="false"
          />
        </u-form-item>
      </view>

      <!--对公账户： 企业商户直接显示，个体商户选择法人个人储蓄账户时不显示，小微商户不显示  -->
      <view
        class="section"
        v-if="
          formData.sft_merchantType == 1 ||
          (formData.sft_accountTypeValue != '1' &&
            formData.sft_merchantType == 0)
        "
      >
        <template
          v-if="formData.sft_accountTypeValue == selectors[0].options[0].value"
        >
          <u-form-item
            required
            label="账户类型"
            label-width="auto"
            prop="sft_accountType"
            :border-bottom="true"
          >
            <u-input
              v-model="formData.sft_accountType"
              type="select"
              input-align="right"
              @click="selectors[0].show = true"
          /></u-form-item>
          <u-select
            v-model="selectors[0].show"
            :list="selectors[0].options"
            @confirm="selectors[0].callback"
          ></u-select>
        </template>
        <template v-else>
          <view class="title">同名银行账户信息</view>
          <!-- 非个体工商户其他个人账户显示 -->
          <u-form-item
            v-if="
              formData.sft_accountTypeValue != selectors[0].options[2].value
            "
            required
            label="账户类型"
            label-width="auto"
            prop="sft_accountType"
            :border-bottom="true"
          >
            <u-input
              v-model="selectors[0].options[0].label"
              type=""
              disabled
              input-align="right"
          /></u-form-item>
        </template>
        <!-- 新增 账户类型2 个体工商户选其他个人账户显示 -->
        <template
          v-if="
            formData.sft_accountTypeValue == selectors[0].options[2].value &&
            formData.sft_merchantType == 0
          "
        >
          <u-form-item
            required
            label="账户类型"
            label-width="auto"
            prop="sft_accountType2"
            :border-bottom="true"
          >
            <u-input
              v-model="formData.sft_accountType2"
              type="select"
              input-align="right"
              @click="selectors[1].show = true"
          /></u-form-item>
          <u-select
            v-model="selectors[1].show"
            :list="selectors[1].options"
            @confirm="selectors[1].callback"
          ></u-select>
        </template>
        <view
          v-if="
            formData.sft_accountTypeValue == '2' &&
            formData.sft_merchantType == 0
          "
          style="color: red"
        >
          个体工商选择非法人结算时，需要提供对公账户或法人个人储蓄账户验证。</view
        >
        <!-- 企业商户显示 || 个体工商户+账户类型2为法人个人储蓄账户时显示 -->
        <template
          v-if="
            formData.sft_merchantType == 1 ||
            (formData.sft_accountType2Value == selectors[1].options[0].value &&
              formData.sft_merchantType == 0)
          "
        >
          <u-form-item
            required
            label="公司名称"
            label-width="auto"
            prop="sft_accountName"
            :border-bottom="true"
          >
            <u-input
              v-model="formData.sft_accountName"
              @blur="inputBlur($event, 'sft_accountName')"
              input-align="right"
              placeholder="请输入"
              :show-confirmbar="false"
            />
          </u-form-item>
          <u-form-item
            required
            label="银行账号"
            label-width="auto"
            prop="sft_bankcardNo"
            :border-bottom="true"
          >
            <u-input
              v-model="formData.sft_bankcardNo"
              @blur="inputBlur($event, 'sft_bankcardNo')"
              input-align="right"
              placeholder="请输入 "
              :show-confirmbar="false"
            />
          </u-form-item>
          <u-form-item
            v-if="formData.sft_bankcardNo"
            required
            label="确认银行账号"
            label-width="auto"
            prop="sft_bankcardNoRepeat"
            :border-bottom="true"
          >
            <u-input
              v-model="formData.sft_bankcardNoRepeat"
              @blur="inputBlur($event, 'sft_bankcardNoRepeat')"
              input-align="right"
              placeholder="请输入"
              :show-confirmbar="false"
            />
          </u-form-item>
          <u-form-item
            required
            label="开户银行"
            label-width="auto"
            prop="sft_bankBranch"
            :border-bottom="true"
          >
            <u-input
              v-model="formData.sft_bankBranch"
              @blur="inputBlur($event, 'sft_bankBranch')"
              input-align="right"
              placeholder="请输入"
              :show-confirmbar="false"
            />
          </u-form-item>
          <u-form-item
            required
            label="开户证明"
            label-width="auto"
            prop="sft_accountOpeningCertificate"
            :border-bottom="false"
            label-position="top"
          >
            <view class="uploadBox" flex>
              <u-form-item
                label=""
                label-width="auto"
                prop=""
                :border-bottom="false"
              >
                <custom-upload
                  ref="upload1"
                  name="object"
                  :action="uploadUrl"
                  :header="header"
                  max-count="1"
                  :multiple="false"
                  :custom-btn="true"
                  @on-success="uploadSuccess"
                  @on-remove="removeObject"
                  :deletable="!isPreview"
                  index="sft_accountOpeningCertificate"
                  :file-list="
                    formData.sft_accountOpeningCertificate
                      ? [
                          {
                            url: getImgFullPath(
                              formData.sft_accountOpeningCertificate
                            )
                          }
                        ]
                      : []
                  "
                >
                  <template v-slot:addBtn>
                    <view
                      class="slot-btn"
                      hover-class="slot-btn__hover"
                      hover-stay-time="150"
                    >
                      <u-icon name="plus" size="80" color="#fff"></u-icon>
                      <view class="des">开户证明</view>
                    </view>
                  </template>
                </custom-upload>
              </u-form-item>
              <view class="tips">
                开户证明可以任选以下一种即可: <br />
                1、开户许可证<br />
                2、网银截图<br />
                3、银行回执单<br />
                4、银行打印结算账户(盖章)<br />
                5、基本存款账户信息单<br />
                6、汇款凭证。<br />
              </view>
            </view>
          </u-form-item>
        </template>
        <!-- 个体工商户+账户类型2为法人个人储蓄账户时显示 -->
        <template
          v-if="
            formData.sft_accountType2Value == selectors[1].options[1].value &&
            formData.sft_merchantType == 0
          "
        >
          <u-form-item
            required
            label="法人姓名"
            label-width="auto"
            prop="sft_corporationName"
            :border-bottom="false"
          >
            <u-input
              v-model="formData.sft_corporationName"
              @blur="inputBlur($event, 'sft_corporationName')"
              input-align="right"
              placeholder="请输入"
              :show-confirmbar="false"
            />
          </u-form-item>
          <u-form-item
            required
            label="银行卡照片(有银行卡号的那一面)"
            label-width="auto"
            prop="sft_corporatePersonalAccountFrontImage"
            :border-bottom="false"
            label-position="top"
          >
            <view class="uploadBox" flex>
              <u-form-item
                label=""
                label-width="auto"
                prop=""
                :border-bottom="false"
              >
                <custom-upload
                  ref="upload1"
                  name="object"
                  :action="uploadUrl"
                  :header="header"
                  max-count="1"
                  :multiple="false"
                  :custom-btn="true"
                  @on-success="uploadSuccess"
                  @on-remove="removeObject"
                  :deletable="!isPreview"
                  index="sft_corporatePersonalAccountFrontImage"
                  :file-list="
                    formData.sft_corporatePersonalAccountFrontImage
                      ? [
                          {
                            url: getImgFullPath(
                              formData.sft_corporatePersonalAccountFrontImage
                            )
                          }
                        ]
                      : []
                  "
                >
                  <template v-slot:addBtn>
                    <view
                      class="slot-btn"
                      hover-class="slot-btn__hover"
                      hover-stay-time="150"
                    >
                      <u-icon name="plus" size="80" color="#fff"></u-icon>
                      <view class="des">银行卡正面照</view>
                    </view>
                  </template>
                </custom-upload>
                <custom-upload
                  ref="upload1"
                  name="object"
                  :action="uploadUrl"
                  :header="header"
                  max-count="1"
                  :multiple="false"
                  :custom-btn="true"
                  @on-success="uploadSuccess"
                  @on-remove="removeObject"
                  :deletable="!isPreview"
                  index="sft_corporatePersonalAccountBackImage"
                  :file-list="
                    formData.sft_corporatePersonalAccountBackImage
                      ? [
                          {
                            url: getImgFullPath(
                              formData.sft_corporatePersonalAccountBackImage
                            )
                          }
                        ]
                      : []
                  "
                >
                  <template v-slot:addBtn>
                    <view
                      class="slot-btn"
                      hover-class="slot-btn__hover"
                      hover-stay-time="150"
                    >
                      <u-icon name="plus" size="80" color="#fff"></u-icon>
                      <view class="des">银行卡背面照</view>
                    </view>
                  </template>
                </custom-upload>
              </u-form-item>
              <view class="tips">
                支持.jpg .jpeg .png格式照片，大小不超过10M
              </view>
            </view>
          </u-form-item>
          <u-form-item
            required
            label="法人银行账号"
            label-width="auto"
            prop="sft_corporatePersonalAccountNo"
            :border-bottom="false"
          >
            <u-input
              v-model="formData.sft_corporatePersonalAccountNo"
              @blur="inputBlur($event, 'sft_corporatePersonalAccountNo')"
              input-align="right"
              placeholder="请输入"
              :show-confirmbar="false"
            />
          </u-form-item>
          <u-form-item
            required
            label="开户银行"
            label-width="auto"
            prop="sft_corporatePersonalAccountBankBranch"
            :border-bottom="false"
          >
            <u-input
              v-model="formData.sft_corporatePersonalAccountBankBranch"
              @blur="
                inputBlur($event, 'sft_corporatePersonalAccountBankBranch')
              "
              input-align="right"
              placeholder="请输入"
              :show-confirmbar="false"
            />
          </u-form-item>
        </template>
      </view>
      <!-- 签约方式 -->
      <view class="section">
        <u-form-item
          label="签约方式"
          label-width="auto"
          prop="radio"
          :border-bottom="false"
        >
          <u-radio-group v-model="formData.sft_signType">
            <u-radio
              v-for="(item, index) in radioGroups[0].options"
              :key="index"
              :name="item.name"
              :disabled="item.disabled"
            >
              {{ item.name }}
            </u-radio>
          </u-radio-group>
        </u-form-item>
        <view class="tips" v-if="formData.sft_registerPhone"
          >请关注注册手机号
          {{
            formData.sft_registerPhone
          }}
          上的短信，根据短信引导进行线上刷脸签约
        </view>
      </view>
      <!-- 提交审核 -->
      <view class="section">
        <view>
          提示：所有资料提交后
          ，随时留意门店后台状态，如出现审核被拒，请根据要求重新填写提交；
        </view>
        <u-image
          src="https://axure-file.lanhuapp.com/md5__e9ad7d710e122e59c6c37addf549f2f8.png"
          mode="widthFix"
        ></u-image>
        <view class="tips big">
          如审核成功，请法人随时留意盛付通短信通知，并且根据流程做人脸识别，识别成功后，请回到该界面记录微信和支付宝子商户号，分别点击以下微信和支付宝认证即可。
        </view>
        <u-button
          type="primary"
          ripple
          style="margin: 40rpx 0"
          @click="submit"
          v-if="!isPreview"
          >提交审核</u-button
        >
      </view>
      <!-- 审核后续步骤 -->
      <view class="section">
        <view class="title"
          >其他资料 <text style="color: red">（由客服填写）</text></view
        >
        <u-form-item
          label="微信子商户号："
          label-width="auto"
          :border-bottom="true"
          prop="sft_wxmerchantNumber"
          ><u-input
            v-model="formData.sft_wxmerchantNumber"
            @blur="inputBlurAllowPreviewUpd($event, 'sft_wxmerchantNumber')"
            input-align="right"
            placeholder="微信子商户号"
            :show-confirmbar="false"
        /></u-form-item>
        <u-form-item
          label="支付宝子商户号："
          label-width="auto"
          :border-bottom="true"
          prop="sft_alimerchantNumber"
          ><u-input
            v-model="formData.sft_alimerchantNumber"
            @blur="inputBlurAllowPreviewUpd($event, 'sft_alimerchantNumber')"
            input-align="right"
            placeholder="支付宝子商户号"
            :show-confirmbar="false"
        /></u-form-item>
        <u-form-item
          label="盛付通商户号:"
          label-width="auto"
          :border-bottom="true"
          prop="sftMerchantNumber"
          ><u-input
            v-model="formData.sftMerchantNumber"
            @blur="inputBlurAllowPreviewUpd($event, 'sftMerchantNumber')"
            input-align="right"
            placeholder="请输入"
            :show-confirmbar="false"
        /></u-form-item>
        <u-form-item
          label="盛付通商户私钥:"
          :auto-height="true"
          label-width="auto"
          :border-bottom="true"
          prop="shengpaySubPrivateKey"
          label-position="top"
          ><u-input
            v-model="formData.shengpaySubPrivateKey"
            maxlength="5000"
            type="textarea"
            @blur="inputBlurAllowPreviewUpd($event, 'shengpaySubPrivateKey')"
            input-align="left"
            placeholder="请输入"
            :show-confirmbar="false"
        /></u-form-item>
        <u-form-item
          label="盛付通商户公钥:"
          :auto-height="true"
          label-width="auto"
          :border-bottom="false"
          prop="shengpaySubPublicKey"
          label-position="top"
          ><u-input
            v-model="formData.shengpaySubPublicKey"
            maxlength="5000"
            type="textarea"
            @blur="inputBlurAllowPreviewUpd($event, 'shengpaySubPublicKey')"
            input-align="left"
            placeholder="请输入"
            :show-confirmbar="false"
        /></u-form-item>
      </view>
      <view class="section remark">
        <view class="red">
          备注： <br />
          1.收到短信人脸识别成功后扫描下方二维码(将二维码保存到手机)<br />
          2.分别进行微信和支付宝认证(认证方式:微信和支付宝分别扫描对应的二维码，选择子商户号，确定即可)
        </view>
        <image
          class="img"
          src="https://image.blacksilverscore.com/uploads/5c999d1e-052d-4638-9543-3efc6b29ba63.png"
          mode="widthFix"
        />
        <image
          class="img"
          src="https://image.blacksilverscore.com/uploads/16eea849-b28b-4bbf-8648-19c3278c92c3.jpg"
          mode="widthFix"
        />
        <br />
        <view class="red"> 认证时如出现以下情况，点击“我知道了”。 </view>
        <br />
        <image
          class="img"
          src="https://axure-file.lanhuapp.com/md5__d53ba760c420eedfe29fd06c64a1486c.png"
          mode="widthFix"
        />
        <br />
        <view class="red">
          点击左下角注册新商家，根据下面的身份进行提交资料，认证完成。
        </view>
        <br />
        <image
          class="img"
          src="https://axure-file.lanhuapp.com/md5__ed554792f60cefd1f38cbb5614fb46fe.png"
          mode="widthFix"
        />
        <image
          class="img"
          src="https://axure-file.lanhuapp.com/md5__c9ea17a89576c3bd879c2c8072fd34c8.png"
          mode="widthFix"
        />
        <image
          class="img"
          src="https://axure-file.lanhuapp.com/md5__cc78264dba4955494f323f0f205b8646.png"
          mode="widthFix"
        />
      </view>

      <!-- <view class="protocol" v-if="!isPreview">
        <u-checkbox-group>
          <u-checkbox v-model="agree">
            <text>同意资料申报由万店补贴工作人员办理</text>
          </u-checkbox>
        </u-checkbox-group>
      </view> -->

      <u-back-top :scroll-top="scrollTop"></u-back-top>
    </u-form>
    <!-- <c_channelSelector ref="channelSelectorRef" @on-confirm="channelConfirm" /> -->
  </view>
</template>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #fff;
  padding-bottom: 60rpx;

  .section {
    padding: 30rpx 20rpx;
    margin: 30rpx 24rpx;
    background: #fff;
    border-radius: 16rpx;
    margin-bottom: 30rpx;
    box-shadow: 0 0 16rpx 0 rgba(0, 0, 0, 0.1);

    .cq {
      padding-left: 10rpx;
      color: #2979ff;
      font-size: 24rpx;
    }

    &.remark {
      line-height: 46rpx;

      .red {
        color: red;
        margin-bottom: 20rpx;
      }

      .img {
        margin: 0 auto;
        display: block;
        max-width: 100%;
      }
    }

    .title {
      font-size: 28rpx;
      margin-bottom: 10rpx;
      font-weight: bold;
    }

    .tips {
      font-size: 20rpx;
      color: red;

      &.big {
        font-size: 24rpx;
        margin-bottom: 20rpx;
      }
    }

    .links {
      font-size: 24rpx;
      color: #2979ff;
    }
  }
}

.protocol {
  text-align: center;
  display: flex;
  justify-content: center;
  margin: 50rpx 0 30rpx 0;

  .link {
    color: #6b9eff;
  }
}

.slot-btn {
  width: 200rpx;
  height: 200rpx;
  border-radius: 16rpx;
  background-color: rgb(244, 245, 246);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;

  .des {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    text-align: center;
    width: 100%;
    padding: 10rpx;
    font-size: 24rpx;
    color: #fff;
    // height: 50rpx;
    line-height: 30rpx;
  }
}

.uploadBox {
  gap: 16rpx;
  margin-top: 20rpx;
}

.submitBtn {
  margin: 50rpx 0;
  display: block;
}
</style>
